<nz-spin nzSimple nzTip="Loading hook executions" *ngIf="loading" class="center"></nz-spin>
<div *ngIf="!loading">
        <!-- Not found message -->
        <ng-container *ngIf="runNumber && !task">
            <nz-alert nzType="info" nzMessage="Hook execution has been deleted"></nz-alert>
        </ng-container>

        <ng-container *ngIf="executions">
            <h3>Hook executions</h3>
            <nz-select nzShowSearch [(ngModel)]="task" (ngModelChange)="selectTask($event)">
                <nz-option nzCustomContent *ngFor="let e of executions" [nzValue]="e" nzLabel="{{ 'Workflow run n°' + e.workflow_run }}">
                        <div class="hookItem">
                            <div class="status" [class.done]="e.status === hookStatus.DONE"
                                 [class.doing]="e.status === hookStatus.DOING"
                                 [class.error]="e.status === hookStatus.FAIL"></div>
                            {{ 'Workflow run n°' + e.workflow_run }}
                            <span class="date">{{' at '}}{{e.timestamp/1000000 | amDateFormat: 'YYYY-MM-DD HH:mm:ss Z' }}</span>
                        </div>

                </nz-option>
            </nz-select>
        </ng-container>

        <ng-container *ngIf="task">
            <form nz-form>
                <ng-container>
                    <h3>Hook configuration</h3>
                    <ng-container *ngIf="task.config">
                        <nz-form-item *ngFor="let k of task.config | keys">
                            <nz-form-label [nzSpan]="4" name="{{k}}">{{k}}</nz-form-label>
                            <nz-form-control [nzSpan]="20">
                                <input nz-input type="text" name="value-{{k}}" [ngModel]="task.config[k].value" [readonly]="true" *ngIf="k !== 'payload'">
                                <ng-container *ngIf="k === 'payload'">
                                    <codemirror name="value-{{k}}"
                                            [ngModel]="task.config[k].value"
                                            [config]="codeMirrorConfig"
                                            #textareaCodeMirror>
                                    </codemirror>
                                </ng-container>
                            </nz-form-control>
                        </nz-form-item>
                    </ng-container>
                    <nz-alert nzType="info" nzMessage="No configuration"  *ngIf="!task.config"></nz-alert>

                    <h3>Hook's log</h3>
                    <nz-form-item *ngIf="task.workflow_run">
                        <nz-form-label [nzSpan]="4">Workflow run</nz-form-label>
                        <nz-form-control [nzSpan]="20">
                            <input nz-input type="text" [value]="task.workflow_run" [readonly]="true" name="run">
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                        <nz-form-label [nzSpan]="4">Status</nz-form-label>
                        <nz-form-control [nzSpan]="20">
                            <nz-input-group [nzSuffix]="suffixIconSearch">
                                <input nz-input type="text" [value]="task.status" name="status" readonly>
                            </nz-input-group>
                            <ng-template #suffixIconSearch>
                                <span *ngIf="task.status === hookStatus.DONE" nz-icon nzType="check" nzTheme="outline"
                                    class="green"></span>
                                <span *ngIf="task.status === hookStatus.DOING" nz-icon [nzType]="'loading'"
                                    class="blue"></span>
                                <span *ngIf="task.status === hookStatus.FAIL" nz-icon nzType="close" nzTheme="outline"
                                    class="red"></span>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                        <nz-form-label [nzSpan]="4">Begin</nz-form-label>
                        <nz-form-control [nzSpan]="20">
                            <input nz-input type="text" [value]="(task.timestamp / 1000000) | date:'short'" [readonly]="true" name="begin">

                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                        <nz-form-label [nzSpan]="4">End</nz-form-label>
                        <nz-form-control [nzSpan]="20">
                            <input nz-input type="text" [value]="(task.processing_timestamp / 1000000) | date:'short'" [readonly]="true" name="end">
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item *ngIf="task.last_error">
                        <nz-form-label [nzSpan]="4">Error</nz-form-label>
                        <nz-form-control [nzSpan]="20">
                            <input nz-input type="text" [value]="task.last_error" [readonly]="true" name="error">
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item *ngIf="body">
                        <nz-form-label [nzSpan]="4">Body</nz-form-label>
                        <nz-form-control [nzSpan]="20">
                            <codemirror name="body"
                                    [ngModel]="body"
                                    [config]="codeMirrorConfig"
                                    #code>
                            </codemirror>
                        </nz-form-control>
                    </nz-form-item>
                </ng-container>
            </form>
        </ng-container>

</div>
    <div *nzModalFooter>
        <button nz-button (click)="_modal.close()">Close</button>
    </div>

